<template>
  <div class="section">
    <div class="border-row"></div>
    <div class="border-col"></div>

    <div class="section-header">数据登录时间分布</div>
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
    <animae-jz :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_TalentMonitor_CheckInTime } from "@/api/data";
export default {
  data() {
    return {
      chartData: [],
      jz: true
    };
  },
  props: ["height", "dateProp"],
  computed: {
    chartsDom() {
      return {
        width: (document.documentElement.clientWidth - 30) / 4 - 15 - 30 + "px",
        height: this.height - 30 - 31 - 15 + "px",
        "z-index": 100,
        position: "relative",
        "margin-top": "15px"
        // 'background-color': 'red'
      };
    }
  },
  mounted() {
    this.$nextTick(_ => {
      this.init();
    });
  },
  methods: {
    init() {
      this.jz = false;
      get_TalentMonitor_CheckInTime(this.dateProp).then(
        ({ data: { data } }) => {
          this.jz = true;
          console.log(data);
            this.chartInit(data);
          if (!data.length) {
            this.chartInit(data);
          } else {
            this.chartData = null;
          }
        }
      );
    },
    chartInit(dataa) {
      console.log(123)
      console.log(dataa)
      let option = {
        color: ["#00bfc2"],
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#00bfc2"
            }
          }
        },
        grid: {
          left: "3%",
          top: "7%",
          right: "10%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#10bbcc"
              }
            },
            splitLine: {
              show: false
            },
            data: dataa.map(v=>v.name)
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#10bbc2"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "数据登录时间分布",
            type: "line",
            smooth: 0.5,
            areaStyle: {},
            data: dataa.map(v=>v.value)
          }
        ]
      };
      let chartsInitlx = this.$echarts.init(this.$refs.charts);
      chartsInitlx.setOption(option);
    }
  }
};
</script>
<style lang="stylus" scoped>
.section {
  width: 100%;
  height: 100%;
}
</style>